---
const pathname = new URL(Astro.request.url).pathname;
const currentPage = pathname.split("/")[1];
const currentSubPage = pathname.split("/")[2]; // To identify subpages under "community"
import SocialHandlesIcons from "./SocialHandlesIcons.astro";
import { ArrowUpRight } from "lucide-astro";
---

<div>
  <nav
    class="navbar container is-fixed-top"
    role="navigation"
    aria-label="main navigation"
  >
    <div class="navbar-brand">
      <a href="/" class="navbar-item">
        <div class="image">
          <img src="/dicedb-logo-dark.png" style="width: auto;" />
        </div>
      </a>
      <a
        role="button"
        class="navbar-burger burger"
        aria-label="menu"
        aria-expanded="false"
        data-target="menu"
        onclick="document.querySelector('.navbar-menu').classList.toggle('is-active');"
      >
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
      </a>
    </div>
    <div class="navbar-menu">
      <div class="navbar-start"></div>
      <div class="navbar-end">
        <a
          class="navbar-item"
          href="https://github.com/sponsors/arpitbbhayani"
          target="_blank"
        >
          <span class="has-text-weight-bold"> Sponsor Us</span>
        </a>
        <a
          class={`navbar-item ${currentPage === "benchmarks" && "is-active"}`}
          href="/benchmarks"
        >
          <span class="has-text-weight-bold"> Benchmarks</span>
        </a>
        <a
          class={`navbar-item ${currentPage === "roadmap" && "is-active"}`}
          href="/roadmap"
        >
          <span class="has-text-weight-bold"> Roadmap</span>
        </a>
        <!-- <a
          class={`navbar-item ${currentPage === "blog" && "is-active"}`}
          href="/blog"
        >
          <span class="has-text-weight-bold"> Blog</span>
        </a> -->
        <a
          class={`navbar-item ${currentPage === "docs" && "is-active"}`}
          href="/get-started/installation/"
        >
          <span class="icon-text">
            <span class="has-text-weight-bold">Docs</span>
            <span class="icon">
              <ArrowUpRight size={20} />
            </span>
          </span>
        </a>
        <div class="navbar-item">
          <SocialHandlesIcons />
        </div>
      </div>
    </div>
  </nav>
</div>
